Обработка на събития с CSS Custom Highlight API: Подобряване на интеракциите при избиране на текст

Избирането на текст е основно взаимодействие в уеб. Потребителите маркират текст по различни причини: копиране на съдържание, споделяне на цитати, търсене или просто за фокусиране на вниманието. Макар че браузърите предоставят стандартно маркиране на текст, CSS Custom Highlight API предлага безпрецедентен контрол върху това взаимодействие, позволявайки на разработчиците да създават визуално привлекателни, контекстуално осъзнати и силно достъпни изживявания при избиране. Тази статия разглежда в дълбочина CSS Custom Highlight API, изследвайки неговите възможности и предоставяйки практически примери за подобряване на вашите уеб приложения.

Разбиране на стандартното поведение при избиране на текст

По подразбиране браузърите стилизират избрания текст, използвайки псевдо-елемента ::selection. Можете да промените свойствата background-color и color, за да промените външния вид. Например:

            ::selection {
  background-color: #b3d4fc;
  color: #000;
}

            

              
                Copy
              
            
          

Този прост CSS фрагмент променя цвета на фона на светлосиньо, а цвета на текста на черно, всеки път когато потребител избере текст на страницата. Въпреки това псевдо-елементът ::selection има ограничения. Той позволява стилизиране само на фона и цвета, което ограничава персонализацията. Освен това му липсва семантична информация за контекста на избора. CSS Custom Highlight API преодолява тези ограничения.

Представяне на CSS Custom Highlight API

CSS Custom Highlight API предоставя по-стабилен и гъвкав подход за управление на маркирането на текст. Той въвежда нови CSS свойства и JavaScript API-та, които ви позволяват да дефинирате и стилизирате персонализирани маркирания въз основа на специфични условия и взаимодействия.

Ключови концепции

• Наследяване на маркирането: Маркиранията се стилизират чрез механизъм на каскадност и наследяване, подобен на други CSS свойства. Това означава, че можете да дефинирате стилове за маркиране по подразбиране на основно ниво и да ги променяте за конкретни елементи или контексти.
• Псевдо-елемент за маркиране: Псевдо-елементът ::highlight() се използва за прилагане на стилове към именувани маркирания.
• JavaScript API: JavaScript API-та като getSelection() и обектите Highlight ви позволяват програмно да създавате, управлявате и взаимодействате с маркирания.
• Достъпност: API-то поддържа ARIA атрибути и съображения за достъпност, като гарантира, че персонализираните маркирания са възприемаеми и разбираеми за потребители с увреждания.

Внедряване на персонализирани маркирания: Ръководство стъпка по стъпка

Ето практическо ръководство за внедряване на персонализирани маркирания с помощта на CSS Custom Highlight API:

Стъпка 1: Дефиниране на именувани маркирания

Първо трябва да дефинирате именувано маркиране с помощта на CSS. Това име ще се използва за асоцииране на стилове с конкретни селекции.

            ::highlight(custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: #000;
}

            

              
                Copy
              
            
          

В този пример сме дефинирали маркиране с име `custom-highlight` с полупрозрачен червен фон и черен цвят на текста. Можете да изберете всяка валидна CSS стойност за цвят на фона и текста.

Стъпка 2: Създаване на маркирания в JavaScript

След това използвайте JavaScript, за да създадете и приложите маркирането. Това включва получаване на избрания текстов диапазон и създаване на обект Highlight.

            function applyCustomHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) {
    return; // No selection
  }

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    return; // Empty selection
  }

  const highlight = new Highlight(range);

  // Register the highlight with the document. It's experimental and may need polyfill or browser flag
  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set('custom-highlight', highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Implement a fallback mechanism here, e.g., wrapping the selected text in a  with a class
    // For example:
    const span = document.createElement('span');
    span.classList.add('fallback-custom-highlight');
    span.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
    span.style.color = '#000';
    range.surroundContents(span);
  }

  selection.removeAllRanges(); // Optional: Clear the selection after highlighting
}

            

              
                Copy
              
            
          

Обяснение:

• window.getSelection(): Взима текущия обект за селекция.
• selection.rangeCount: Проверява дали има активна селекция.
• selection.getRangeAt(0): Взима избрания диапазон.
• new Highlight(range): Създава нов обект Highlight от диапазона.
• CSS.highlights.set('custom-highlight', highlight): Регистрира маркирането в CSS регистъра за маркирания. Това е решаващата стъпка, която свързва JavaScript маркирането с дефинираните по-рано CSS стилове.
• Резервен механизъм (Fallback): Включва важен резервен механизъм за браузъри, които все още не поддържат напълно CSS.highlights. Това гарантира, че вашата функционалност ще се понижи плавно (degrades gracefully), запазвайки функционалност на по-стари браузъри.
• selection.removeAllRanges(): Изчиства селекцията след маркиране. Това е по избор и зависи от желаното от вас потребителско изживяване.

Не забравяйте да прикачите тази функция към event listener, като например кликване на бутон или клавишна комбинация.

Стъпка 3: Работа с множество диапазони (застъпващи се селекции)

API-то може да обработва множество застъпващи се диапазони в рамките на едно маркиране. Можете да добавите няколко диапазона към обект Highlight:

            const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);

if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
  CSS.highlights.set('custom-highlight', highlight);
} else {
  console.warn('CSS.highlights is not supported. Consider using a polyfill.');
  // Implement a fallback for multiple ranges (more complex)
  // This would require splitting the text into smaller spans and applying styles
  // This is a more advanced fallback implementation and may not be suitable for all cases
}

            

              
                Copy
              
            
          

Стилизирането ще бъде приложено към всички диапазони в рамките на маркирането.

Разширени случаи на употреба и техники

CSS Custom Highlight API отваря широк спектър от възможности за подобряване на взаимодействията при избиране на текст. Ето някои разширени случаи на употреба и техники:

1. Контекстуално осъзнато маркиране

Можете да използвате JavaScript, за да анализирате избрания текст и да прилагате различни стилове на маркиране в зависимост от съдържанието му или заобикалящия го контекст. Например, можете да маркирате ключови думи в документ с определен цвят или да идентифицирате и маркирате фрагменти от код.

            function applyContextualHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const selectedText = range.toString();

  let highlightName = 'default-highlight';

  if (selectedText.startsWith('//')) {
    highlightName = 'comment-highlight'; // Highlight code comments
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // Highlight JavaScript keywords
  }

  const highlight = new Highlight(range);

  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set(highlightName, highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Fallback implementation, potentially using data attributes and custom CSS
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

Дефинирайте CSS стилове за всеки тип маркиране:

            ::highlight(comment-highlight) {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

::highlight(keyword-highlight) {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

.fallback-highlight[data-highlight-type="comment-highlight"] {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

.fallback-highlight[data-highlight-type="keyword-highlight"] {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

            

              
                Copy
              
            
          

2. Маркиране на резултати от търсене

Можете да използвате API-то за маркиране на термини за търсене в документ. Това е особено полезно за страници с резултати от търсене или функционалност за търсене в рамките на приложението.

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // Or specific element
  const regex = new RegExp(searchTerm, 'gi'); // Global, case-insensitive

  let match;
  while ((match = regex.exec(text)) !== null) {
    const start = match.index;
    const end = start + searchTerm.length;

    // Create a range for each match
    const range = document.createRange();
    range.setStart(document.body.firstChild, start);
    range.setEnd(document.body.firstChild, end);

    const highlight = new Highlight(range);

    if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
      CSS.highlights.set('search-result-highlight', highlight);
    } else {
      console.warn('CSS.highlights is not supported. Consider using a polyfill.');
      // Fallback, again, requires careful handling of text nodes
    }
  }
}

            

              
                Copy
              
            
          

Дефинирайте CSS стила за маркиране на резултат от търсене:

            ::highlight(search-result-highlight) {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

3. Интеграция със Shadow DOM

CSS Custom Highlight API работи безпроблемно със Shadow DOM, което ви позволява да създавате капсулирани компоненти с персонализирани стилове на маркиране. Можете да дефинирате маркирания в Shadow DOM и да ги прилагате към елементи в рамките на компонента.

4. Съображения за достъпност

Уверете се, че вашите персонализирани маркирания са достъпни за всички потребители. Вземете предвид следното:

• Цветови контраст: Осигурете достатъчен цветови контраст между фона на маркирането и цвета на текста, за да отговаря на указанията на WCAG.
• Навигация с клавиатура: Уверете се, че потребителите могат да навигират в маркирания текст с помощта на клавиатурата.
• Съвместимост с екранни четци: Тествайте вашите маркирания с екранни четци, за да сте сигурни, че избраният текст се обявява правилно.
• Индикатори за фокус: Когато маркиран елемент получи фокус, осигурете ясен визуален индикатор за фокус.

Можете да използвате ARIA атрибути, за да предоставите допълнителна семантична информация за маркиранията. Например, можете да използвате aria-label, за да опишете предназначението на маркиран участък.

5. Локализация и интернационализация

Когато работите с избиране на текст в глобален контекст, вземете предвид следното:

• Посока на текста: Уверете се, че вашите маркирания работят правилно както с посока на текста отляво-надясно (LTR), така и отдясно-наляво (RTL).
• Специфични за езика правила: Бъдете наясно със специфичните за езика правила за избиране на текст и граници на думите.
• Поддръжка на шрифтове: Използвайте шрифтове, които поддържат символите, използвани в различните езици.

6. Оптимизация на производителността

Прилагането на персонализирани маркирания може да повлияе на производителността, особено при големи документи. Обмислете следните техники за оптимизация:

• Debouncing: Използвайте "debouncing" за функцията за маркиране, за да избегнете прекомерни изчисления по време на бързи селекции.
• Кеширане: Кеширайте изчислените диапазони за маркиране, за да избегнете излишното им преизчисляване.
• Виртуализация: Използвайте техники за виртуализация, за да рендирате само маркирания, които са видими в момента във viewport-а.
• Web Workers: Прехвърлете изчисленията за маркиране на web worker, за да избегнете блокирането на основната нишка.

Поддръжка от браузъри и Polyfills

CSS Custom Highlight API е сравнително нов и може да не се поддържа напълно от всички браузъри. Проверете най-новите таблици за съвместимост на браузърите, преди да го използвате в продукция. Обмислете използването на polyfill, за да осигурите поддръжка за по-стари браузъри. Polyfill добавя необходимия код, за да могат по-старите браузъри да разберат новия API. Потърсете онлайн "CSS Custom Highlight API Polyfill", за да намерите опции.

Заключение

CSS Custom Highlight API дава възможност на разработчиците да създават ангажиращи, контекстуално осъзнати и достъпни изживявания при избиране на текст. Като разбирате възможностите на API-то и прилагате техниките, описани в тази статия, можете да подобрите потребителското изживяване на вашите уеб приложения и да предоставите по-интуитивен и визуално привлекателен начин за взаимодействие на потребителите с текста. Не забравяйте да дадете приоритет на достъпността и производителността при внедряването на персонализирани маркирания, както и да вземете предвид съвместимостта с браузъри и опциите за polyfill. Този нюансиран контрол върху избирането на текст дава възможност на разработчиците да изграждат по-интерактивни и лесни за ползване уеб изживявания, съобразени със специфичните нужди на приложението и предпочитанията на потребителите. С нарастването на поддръжката от браузъри, CSS Custom Highlight API обещава да се превърне в незаменим инструмент за модерната уеб разработка.

За допълнително проучване

• MDN Web Docs: Highlight API
• CSS Houdini: Научете повече за проекта CSS Houdini, който позволява тези усъвършенствани CSS функции.